<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<base href="<%=basePath%>">

<title>My JSP 'show.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<link rel="stylesheet" href="<%=basePath%>res/css/main.css">
<link rel="stylesheet" href="<%=basePath%>res/css/lrtk.css">
<link rel="stylesheet" href="<%=basePath%>res/css/search.css">
<script src="<%=basePath%>res/js/jquery.js"></script>
<script src="<%=basePath%>res/js/jdt.js"></script>
</head>

<body>
	<script>
		(function() {
			var a = document.body;
			window.screen.width > 1024 ? a.className = "w1190"
					: a.className = "w990"
		})();
	</script>
	<div class="main">
		<div class="leftwrap">
			<div class="detailpics">
				<c:if test="${!empty pictures}"></c:if>
				<div class="focus">
					<div class="focusbox">
						<div class="focusimg">
							<ul class="fimglist clearfix">
								<c:forEach items="${pictures }">
									<li><a href="http://www.lanrentuku.com/"><img
											src="${picture.pictureUrl }" title="懒人图库"></a></li>
								</c:forEach>
								<li><a href="http://www.lanrentuku.com/"><img
										src="./res/images/Gintama.jpg" title="懒人图库"></a></li>
								<li><a href="http://www.lanrentuku.com/"><img
										src="./res/images/SteinsGate.jpg" title="懒人图库"></a></li>
								<li><a href="http://www.lanrentuku.com/"><img
										src="./res/images/Unicorn.jpg" title="懒人图库"></a></li>
								<li><a href="http://www.lanrentuku.com/"><img
										src="./res/images/Berserk.jpg" title="懒人图库"></a></li>
								<li><a href="http://www.lanrentuku.com/"><img
										src="./res/images/SummerWars.jpg" title="懒人图库"></a></li>
								<li><a href="http://www.lanrentuku.com/"><img
										src="./res/images/akito.jpg" title="懒人图库"></a></li>
								<li><a href="http://www.lanrentuku.com/"><img
										src="./res/images/EVA.jpg" title="懒人图库"></a></li>
							</ul>
						</div>
						<div class="focustool">
							<ul class="ftoollist clearfix">
								<!--通过控制该ul的left值来实现列表的左右移动，增量为931px-->
								<c:forEach items="${pictures }">
									<li class="on"><img src="${picture.pictureUrl }"
										title="懒人图库"></li>
								</c:forEach>
								<li class="on"><a href="http://www.lanrentuku.com/"><img
										src="./res/images/Gintama_s.jpg">
										<p class="imgname">银魂剧场版</p>
										<p class="imgshortcat">永远的万事屋</p></a></li>
								<!--当前项时为该li添加class: on-->
								<li><a href="http://www.lanrentuku.com/"><img
										src="./res/images/SteinsGate_s.jpg">
										<p class="imgname">石头门剧场版</p>
										<p class="imgshortcat">负荷领域的既视感</p></a></li>
								<li><a href="http://www.lanrentuku.com/"><img
										src="./res/images/Unicorn_s.jpg">
										<p class="imgname">高达UC</p>
										<p class="imgshortcat">Gundam Unicorn</p></a></li>
								<li><a href="http://www.lanrentuku.com/"><img
										src="./res/images/Berserk_s.jpg">
										<p class="imgname">剑风传奇</p>
										<p class="imgshortcat">黄金时代</p></a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="comment">商品简介评价区域</div>
		</div>

		<div class="detailtext">商品价格区域</div>
	</div>

</body>
</html>
